<!-- 处理审批 -->

<template>
    <examine >
      <template v-slot:headline>
        <h2>处理审批：处理审批</h2>
      </template>
      <template v-slot:approval>
                 <el-timeline-item timestamp="2018/4/3" placement="top">
            <el-card>
              <h4> <span>处理机构</span> 处理人员（电话）</h4>
               <div style="width: 80%;">
               <!--  <span>答：的小图标</span> --><!-- 答：的小图标 -->
                <div style="width: 60%;display:flex;flex-wrap: wrap;margin-left: 60px;">
                    <div style="margin-right: 30px;">
                        <input type="checkbox" >
                        <span style="margin-right: 10px;">提交上级</span>
                        <input type="text" style="height: 18px;">
                    </div>
                    <div >
                        <input type="checkbox" >
                        <span style="margin-right: 10px;">分派落实</span>
                        <input type="text"  style="height: 18px;">
                    </div>
                    <div style="margin-top:20px;">
                        <input type="checkbox" >
                        <span style="margin-right:10px;">转发</span>
                        <input type="text"   style="height: 18px;margin-left: 28px">
                    </div>
                </div>
                <div style='display:flex;justify-self: start; margin-top:30px;margin-left:58px;'>
                    <p style='margin-left:30px;'>说明</p>
                    <textarea  v-model="explain" name="" id="" cols="30" rows="10" style="width: 80%;margin-left:30px"></textarea>
                </div>
               </div>
               
            </el-card>
          </el-timeline-item>
      </template>
      <template v-slot:submiting >
        <el-button type="primary" style="width: 120px; height: 40px;background-color: rgb(0,153,255);margin-right: 30px" @click="submiT">提交</el-button>
      </template>
    </examine>
  </template>
  
  
<script lang="ts" >
import examine from "../littlecomponents/examine.vue";
import {ref,onMounted} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'  //使用路由
import { useRoute } from 'vue-router'  //接受路由参数
export default {
  //name:"ProcessingAndApproval",
  components: {
    examine,
  },
  setup(){
    const route = useRoute()
     let  id=route.query.id
     const tableData=ref()
     // 拿到id，加载数据
     onMounted(()=>{
               axios({
                method: 'post',
                url: 'http://1.14.73.59:8080/approval_checklist/wApproval',
                params: {
                 id:id
                }
              }).then((res:any) => {
                console.log(res);  // 这里查id8是能查到的
               // tableData.value=res.data.data
              })
        });
    let  explain=ref('')   //说明
   // let  tijiaoA=ref('false') //A是提交check
   // let  tijiaoB=ref()        //B是输入框
   
    const  submiT = () =>{ 
      // let tijiao,fenpai,luoshi 
      // if(tijiaoA.value){
      //   tijiao=tijiaoB.value
      // }
     console.log(explain.value);
    axios({
                method: 'post',
                url: 'http://1.14.73.59:8080/approval_checklist/wApproval',
                params: {
                 id:id,
                 body:explain.value,
                 username:null,
                 phone:null, // username是登录者的用户名，包括电话也是
                }
              }).then((res:any) => {
                console.log(res);  // 这里查id8是能查到的
               // tableData.value=res.data.data
              })
    }
  
    return {
      submiT,//点击提交
      explain,// 说明内容
     
    }
   
  } // setup
};

  </script>